<template>
  <d2-container>
    <div style="display: flex;justify-content: space-between;">
      <el-input placeholder="请输入内容" style="width:450px" v-model="txt">
        <template slot="append"><d2-icon-svg  style="width:15px;height: 15px" name="search"/></template>
      </el-input>
      <el-button type="primary" @click="$router.push('/demo/components/game/add')">新增</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="游戏类型">
              <span>{{ props.row.categoryName }}</span>
            </el-form-item>
            <el-form-item label="激活码">
              <span v-if="props.row.activeCodeOld">&nbsp;&nbsp;旧:{{ props.row.activeCodeOld }}</span>
              <span v-if="props.row.activeCodeNew">&nbsp;&nbsp;新:{{props.row.activeCodeNew }}</span>
            </el-form-item>
            <el-form-item label="发布日期">
              <span>{{ props.row.releaseDate }}</span>
            </el-form-item>
            <el-form-item label="更新日期">
              <span>{{ props.row.lastUpdate }}</span>
            </el-form-item>
            <el-form-item label="有效日期">
              <span>{{ props.row.validityDate | transValidate }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="游戏 ID"
        prop="gameId">
      </el-table-column>
      <el-table-column
        label="游戏名称"
        prop="gameName">
      </el-table-column>
      <el-table-column
        label="游戏图片"
        prop="imgUrl">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="page.size"
      :pager-count="8"
      layout="prev, pager, next"
      :total="page.total"
      @current-change="currentChange"
    >
    </el-pagination>
  </d2-container>
</template>

<script>
import { doDelete, doGet } from '@/api'

export default {
  name: 'game',
  data () {
    return {
      page: { size: 10, current: 1, total: 10 },
      tableData: []
    }
  },
  created () {
    this.getData()
  },
  filters: {
    transValidate: function (value) {
      if (!value) return '永久有效'
      return value
    }
  },
  methods: {
    handleEdit (index, row) {
      this.$router.push({ path: `/demo/components/game/category/upd/${row.categoryId}` })
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDelete('gameCategory', [row.categoryId]).then(res => {
          if (res) {
            this.$message.success('删除成功！')
          } else {
            this.$message.error('删除成功！')
          }
          this.getData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getData () {
      doGet('game', this.page).then(res => {
        this.tableData = res.records
        this.page.total = res.total
      })
    },
    currentChange (c) {
      this.page.current = c
      this.getData()
    }
  }
}
</script>

<style scoped>
img{
  width: 150px;
  height: 80px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
